import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    content: {
        flex: 1,
        padding: 10,
    },
    scrollContent: {
        flex: 1,
    },
    scanSection: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 16,
        marginBottom: 10,
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 3,
    },
    sectionTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 12,
    },
    inputRow: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    inputContainer: {
        flex: 1,
        position: 'relative',
        marginRight: 12,
    },
    input: {
        height: 44,
        backgroundColor: '#f8f9fa',
        borderRadius: 8,
        paddingHorizontal: 16,
        paddingRight: 40,
        fontSize: 15,
        borderWidth: 1,
        borderColor: '#e9ecef',
    },
    clearButton: {
        position: 'absolute',
        right: 10,
        top: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        width: 30,
        height: 30,
    },
    clearButtonText: {
        color: '#999',
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
        textAlignVertical: 'center',
        lineHeight: 44,
        includeFontPadding: false,
        paddingTop: 0,
        paddingBottom: 0,
    },
    scanBtn: {
        width: 44,
        height: 44,
        borderRadius: 8,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#e9ecef',
    },
    loadingContainer: {
        alignItems: 'center',
        paddingVertical: 20,
    },
    loadingText: {
        fontSize: 16,
        color: '#666',
    },
    materialListSection: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 16,
        marginBottom: 10,
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 3,
    },
    materialItem: {
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        padding: 5,
        marginBottom: 6,
    },
    materialDetails: {
        gap: 4,
    },
    detailRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    detailLabel: {
        fontSize: 14,
        color: '#666',
        minWidth: 80,
    },
    detailValue: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    selectedMaterialsSection: {
        backgroundColor: '#fff',
        borderRadius: 8,
        padding: 16,
        marginBottom: 12,
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 3,
    },
    selectedMaterialItem: {
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        padding: 12,
        marginBottom: 8,
    },
    claimQuantityInput: {
        flex: 1,
        height: 36,
        backgroundColor: '#fff',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 8,
        fontSize: 14,
        borderWidth: 1,
        borderColor: '#e9ecef',
        minWidth: 120,
        textAlignVertical: 'center',
        includeFontPadding: false,
    },
    deleteButton: {
        backgroundColor: '#dc3545',
        borderRadius: 6,
        paddingHorizontal: 12,
        paddingVertical: 8,
        minWidth: 60,
        alignItems: 'center',
        alignSelf: 'flex-end',
    },
    deleteButtonText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: '500',
    },
    claimButton: {
        backgroundColor: '#0076ff',
        borderRadius: 8,
        paddingVertical: 16,
        paddingHorizontal: 24,
        marginHorizontal: 10,
        marginBottom: 5,
        marginTop: 5,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 3,
    },
    claimButtonDisabled: {
        backgroundColor: '#ccc',
    },
    claimButtonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
});
